<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!-- 引用Layui CSS文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.min.css">

  <!-- 引用Layui JavaScript文件 -->
  <script src="https://cdn.staticfile.org/layui/2.5.7/layui.min.js"></script>

  <style>
    /* 整个页面的背景颜色 */
    body {
      background-color: #F5F5F5;
    }

    /* 头像区域样式 */
    .avatar-container {
      width: 100%;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }

    .avatar-image {
      height: 250px;
      background-image: url(https://picsum.photos/800/300/?random);
      background-size: cover;
      background-position: center;
    }

    /* 个人信息区域样式 */
    .personal-info {
      margin-top: 20px;
      padding: 10px;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }

    .personal-info h2 {
      margin-bottom: 20px;
      font-size: 24px;
      color: #333;
    }

    .personal-info .label {
      font-size: 16px;
      color: #666;
    }

    .personal-info .value {
      font-size: 16px;
      color: #333;
    }

    /* 表单元素样式 */
    input[type="text"],
    input[type="password"],
    input[type="tel"],
    input[type="email"] {
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      color: #666;
      border: none;
      padding-left: 10px;
      box-shadow: none;
      outline: none;
      background-color: #F5F5F5;
    }

    input[type="radio"],
    input[type="checkbox"] {
      margin-right: 10px;
    }

    /* 按钮样式 */
    .btn-primary {
      background-color: #1E9FFF;
      border-color: #1E9FFF;
      color: #fff;
      width: 120px;
      height: 40px;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s;
    }

    .btn-primary:hover {
      background-color: #1986D9;
      border-color: #1986D9;
    }

    /* 其他样式 */
    .clearfix {
      clear: both;
    }
    .layui-card-body form {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
    #touxiang{
      margin-left: -50px;
      margin-top: 30px;
    }
  </style>
</head>
</head>
<body>
<!-- 页面主要结构 -->
<div class="layui-container">

  <!-- 个人信息卡片 -->
  <div class="layui-card">
    <div class="layui-card-header">
      <i class="layui-icon layui-icon-user"></i> 个人信息
    </div>
    <div class="layui-card-body">
      <form class="layui-form" action="">
        <div class="layui-form-item">
          <label class="layui-form-label " id = "touxiang">头像</label>
          <div class="layui-input-block">
            <img src="../static/img/avatar/Member002.jpg" alt="头像" class="layui-circle" width="80">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">ID</label>
          <div class="layui-input-inline">
            <input type="text" name="id" required lay-verify="required" placeholder="请输入ID" autocomplete="off" class="layui-input" value="123456">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">姓名</label>
          <div class="layui-input-inline">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input" value="张三">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">用户名</label>
          <div class="layui-input-inline">
            <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input" value="zhangsan">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">账号类型</label>
          <div class="layui-input-inline">
            <input type="radio" name="type" value="个人账号" title="个人账号" checked>
            <input type="radio" name="type" value="企业账号" title="企业账号">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">性别</label>
          <div class="layui-input-inline">
            <input type="radio" name="gender" value="男" title="男" checked>
            <input type="radio" name="gender" value="女" title="女">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">密码</label>
          <div class="layui-input-inline">
            <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" value="123456">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">电话</label>
          <div class="layui-input-inline">
            <input type="tel" name="phone" required lay-verify="phone" placeholder="请输入电话" autocomplete="off" class="layui-input" value="13888888888">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">邮箱</label>
          <div class="layui-input-inline">
            <input type="email" name="email" required lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input" value="zhangsan@gmail.com">
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo"><i class="layui-icon layui-icon-ok"></i> 立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-refresh"></i> 重置</button>
          </div>
        </div>
      </form>
    </div>
  </div>

</div>
<!-- 引入Layui的JavaScript文件 -->
<script src="//cdn.staticfile.org/layui/2.5.7/layui.min.js"></script>
<!-- 初始化form组件 -->
<script>
  layui.use(['form'], function(){
    var form = layui.form;
    // ...
  });
</script>
</body>
</html>